@screen-width: 750;
@rem: @screen-width/10rem;
*{margin: 0;padding: 0;}
body {
  a{
    color: red;
  }
}

.layer{
  width: 100%;height: 100%;max-width: 750/@rem;position: absolute;left: 50%;top: 0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.page-index{
  position: fixed;top: 0;left: 0;width: 750/@rem;height: 100%;background: url("./img/bg1.jpg?__sprite") no-repeat;background-size: 100% auto;z-index: 3;
  .index-title{
    width: 200/@rem;position: absolute;left: 275/@rem;top: 173/@rem;;
    img{width: 100%;vertical-align: middle;}
  }
  .index-gif{
    width: 230/@rem;height: 230/@rem;position: absolute;left: 273/@rem;bottom: 188/@rem;
    img{width: 100%;}
  }
  .index-btn{
    position: absolute;left: 288/@rem;bottom: 85/@rem;width: 222/@rem;height: 76/@rem;
    img{width: 100%;vertical-align: middle;}
  }
}
.page-layer{
  width: 750/@rem; height: 100%;background: url("../img/bg2.jpg") no-repeat;background-size: cover;position: fixed;left: 0;top: 0;
  .page-question{
    text-align: center;position: absolute;left: 55/@rem;top: 104/@rem;width: 640/@rem;font-size: 40/@rem;line-height: 60/@rem;color: #000;
    p{
      width: 640/@rem;height: 51/@rem;text-indent: 48/@rem;
      em{color: #e14a4a;font-style: normal;}
    }
    .question-img{
      width: 640/@rem;
      img{width: 90%;display: block;margin: 0 auto 41/@rem;}
    }
  }
  &.page-layer-notimg{
    .page-question{padding-top: 149/@rem;}
    .page-answer{padding-top: 125/@rem;}
  }
  &.page-layer-audio{
    .page-img{
      width: 640/@rem;position: absolute;left: 55/@rem;top: 110/@rem;
      img{width: 100%;}
      .page-play{width: 87/@rem;height: 86/@rem;position: absolute;left: 304/@rem;top: 64/@rem;background: url("./img/audio_play.png?__sprite") no-repeat center;background-size: 87/@rem 86/@rem;cursor: pointer;}
      .play-tips{width: 142/@rem;height: 44/@rem;line-height: 44/@rem;padding-top: 62/@rem;color: #999999;font-size: 22/@rem;position: absolute;top: 207/@rem;left: 430/@rem;text-align: right;background: url("./img/audio_tips.png") no-repeat left top;background-size: 77/@rem 65/@rem;}
    }
    .page-title{top: 405/@rem;}
    .page-question{top: 528/@rem;}
    .page-answer{margin-top: 45/@rem;}
  }
  &.page-layer-video.page-layer-last{
    .page-answer{margin-top: 35/@rem;}
  }

  .page-title{width: 211/@rem;height: 89/@rem;line-height: 89/@rem;text-align:center;color: #fff;font-size: 32/@rem;position: absolute;top: 377/@rem;left: 276/@rem;background: url("./img/titlebg.png") no-repeat center;background-size: 250/@rem 131/@rem;padding: 21/@rem 20/@rem 21/@rem 19/@rem;}

  &.page-layer-video{
    .page-answer{margin-top: 25/@rem;}
    .page-question{top: 495/@rem;}
  }
  .page-video{
    width: 386/@rem;height: 270/@rem;position: absolute;left: 200/@rem;top: 80/@rem;padding: 17/@rem 15/@rem 16/@rem;background: url("./img/videobg.png?__sprite") no-repeat;background-size: 416/@rem 303/@rem;
    video{width: 386/@rem;height: 269/@rem;margin-top: 1/@rem;}
    .play-mask{
      width: 388/@rem;height: 270/@rem;position: absolute;left: 13/@rem;top: 19/@rem;
      img{width: 388/@rem;height: 270/@rem;vertical-align: middle;}
    }
    .page-play{width: 386/@rem;height: 270/@rem;position: absolute;left: 17/@rem;top: 16/@rem;background: url("./img/play.png?__sprite") no-repeat center;background-size: 86/@rem 85/@rem;cursor: pointer;}
  }
  .page-answer{
    width: 530/@rem;/*position: absolute;left: 141/@rem;bottom: 30/@rem;*/text-align: left;margin: 55/@rem 0 0 91/@rem;
    a{display: block;height: 95/@rem;line-height: 95/@rem;border: 1px solid #ddd;margin-bottom: 19/@rem;text-indent: 23/@rem;color: #5d5d5d;font-size: 28/@rem;text-decoration: none;background-repeat: no-repeat;background-position: right center;background-size: auto 95/@rem;cursor: pointer;}
    &.selected{
      a.active{
        background-color: rgba(94,94,94,0.8);color: #fff;
        &.ok{background-image: url("../img/ok.png?__sprite");}
        &.err{background-image: url("../img/err.png?__sprite");}
      }
    }
  }
}
.page-top{
  position: fixed;left: 117/@rem;top: 35/@rem;width: 633/@rem;overflow: hidden;z-index: 2;
  em{width: 32/@rem;height: 32/@rem;line-height: 32/@rem;font-size: 22/@rem;text-align:center;background: #c9c9c9;display: inline-block;float: left;color: #dddddd;border-radius: 50%;margin-right: 20/@rem;}
  em.active{background: #e14a4a;color: #fbe7e7;}
}
.page-clock{
  position: fixed;left: 648/@rem;top: 181/@rem;color: #e14a4a;line-height: 30/@rem;font-size: 30/@rem;width: 60/@rem;z-index: 2;
}

.page-result{
  width: 750/@rem;height: 100%;background: url("../img/bg2.jpg") no-repeat;background-size: cover;position: fixed;left: 0;top: 0;
  .result-img{
    width: 430/@rem;position: absolute;left: 204/@rem;top: 103/@rem;
    img{width: 100%;}
  }
  .result-content{
    width: 430/@rem;position: absolute;left: 204/@rem;top: 634/@rem;text-align: center;
    p{font-size: 25/@rem;line-height: 50/@rem;color: #5d5d5d;}
  }
  .sharebtn{width: 222/@rem;height: 76/@rem;position: absolute;left: 303/@rem;bottom: 120/@rem;background: url("./img/sharebtn.png?__sprite") no-repeat;background-size: 222/@rem 76/@rem;}
}
.page-load{
  width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: #fff;z-index: 5;
  .page-load-people{
    width: 100/@rem;height: 100/@rem;position: absolute;left: 50%;top: 50%;margin-top: -110/@rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    img{width: 100%;vertical-align: middle;}
  }
  .page-loadbar{
    width: 640/@rem;height: 40/@rem;border-radius: 20/@rem;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;left: 50%;top: 50%;margin-top: 45/@rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    span{
      width: 0;height: 100%;background: blue;display: block;
      -webkit-transition: 3s;
      -moz-transition: 3s;
      -ms-transition: 3s;
      -o-transition: 3s;
      transitionn: 3s;
      &.loading{width:100%;}
    }
  }
  .page-loadnum{
    width: 640/@rem;height: 40/@rem;line-height: 40/@rem;border-radius: 20/@rem;overflow: hidden;position: absolute;left: 50%;top: 50%;text-align: center;color: #5d5d5d;font-size: 36/@rem;margin-top: 10/@rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
.share-layer{
  width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 20;background: rgba(0,0,0,0.8) url("./img/shareico.png?__sprite") no-repeat right top;background-size: 244/@rem 313/@rem;display: none;
}
.mark{position: absolute;left: 250/@rem;bottom: 30/@rem;z-index: 12;width:282/@rem;height: 76/@rem;background: url("./img/mark.png?__sprite") no-repeat;background-size: 282/@rem 76/@rem;display: none;}
.music_btn{position: fixed;right: 45/@rem;top: 100/@rem;z-index: 15;background: rgba(0,0,0,0.3) url("./img/music@2x.png") no-repeat center;width: 60/@rem;height: 60/@rem;border-radius: 50%;background-size: 48/@rem 48/@rem;}
.music_btn.off{background-image: url("./img/music_off@2x.png");}
.footer{
  position: fixed;left: 0;bottom: 15/@rem;width: 100%;text-align: center;color: #757575;font-size: 18/@rem;line-height: 24/@rem;z-index: 11;text-indent: 58/@rem;display: none;
}

@media (min-width: 751px) {
  .layer{
    width: 750/@rem;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
  }
  .page-index, .page-layer, .page-load, .page-result, .page-load, .page-top, .page-clock{position: absolute;}
}
@media (min-width: 639px) and (min-height: 1151px){
  .page-layer{
    /*.question-img{margin-bottom: 120/@rem;}*/
    .page-answer{position: fixed;left: 141/@rem;bottom: 127/@rem;margin: 0;}
  }
  .page-layer.page-layer-video.page-layer-last{
    .page-video{top: 140/@rem;}
    .page-title{top: 437/@rem;}
    .page-question{top: 560/@rem;}
    .page-answer{bottom: 157/@rem;}
  }
  .page-layer .mark{bottom: 71/@rem;}
  .page-index{
    background-size: cover;
    .index-title{width: 252/@rem;}
  }
  .page-result{
    .result-img{top: 203/@rem;}
    .result-content{top: 734/@rem;}
    .sharebtn{bottom: 200/@rem;}
  }
}
@media (max-width: 360px) and (min-height: 560px){
  .page-layer{
    /*.question-img{margin-bottom: 120/@rem;}*/
    .page-answer{position: fixed;left: 141/@rem;bottom: 127/@rem;margin: 0;}
  }
  .page-layer.page-layer-video.page-layer-last{
    .page-video{top: 140/@rem;}
    .page-title{top: 437/@rem;}
    .page-question{top: 560/@rem;}
    .page-answer{bottom: 157/@rem;}
  }
  .page-layer .mark{bottom: 71/@rem;}
  .page-index{
    background-size: cover;
    .index-title{width: 252/@rem;}
  }
}
@media (min-width: 360px) and (max-height: 520px){
  .page-layer .mark{bottom: 10/@rem;}
}
